<template>
  <div class="receivePic">
    <!-- <x-header :left-options="{backText: ''}"></x-header> -->
    <top :text="'领取BNCN'"></top>
    <div class="receive">
      <div style="margin-top:85px;">
        <div class="whiteColor center receiveBox" style="padding-top: 180px;">
          <div @click="lingqu">
            立即领取
          </div>
        </div>
        <div style="margin-top:50px;">
          <ul class="instructions">
            <li class="whiteColor fr center instructionsLi" v-for="data in dataList">
              <span style="color: #fbfb39;font-size:16px;"></span>
              <span>{{data.name}}</span>
              <a :href="useHref" class="useBtn">立即使用</a>
            </li>
            <div style="text-align: center;margin-top:50px;">
              <img src="../../assets/receive.png" alt="" width="70%">
              <div style="color: #fff;margin-top: -40px;">使用步骤</div>
            </div>
          </ul>
        </div>
      </div>
      <div style="margin-top: 40px;">
        <img src="../../assets/receiveContBg.png" alt="" width="80%" style="margin-left:10%">
      </div>
      <div style="height: 20px;"></div>
    </div>
  </div>

</template>
<script>
  import { XHeader } from 'vux'
  import http from '../../service/http.js'
  import tips from '../../service/tips.js'
  import Top from '../../components/common/top.vue'
  import util from '../../service/util.js'
  export default {
    data() {
      return {
        dataList: [],
        username: "",
        useHref: "#/main/fp/digList"
      }
    },
    mounted() {
      this.username = this.$route.query.username || util.getItem('login.username');
      if (this.$route.query.username) {
        this.useHref = 'myapp://tonative/param?id=123'
      } else {
        this.useHref = "#/main/fp/digList"
      }
      this.getData();
    },
    methods: {
      lingqu() {
        http.get("/user/getBncn?username=" + this.username).then((res) => {
          if (res.data.status == 200) {
            tips.tips(res.data.msg)
          } else {
            tips.tips(res.data.msg)
          }
        }).catch((res) => {
          tips.tips(res.data.msg)
        })
      },
      getData() {
        http.get("/user/activitys/packet?id=bncn&username=" + this.username).then((res) => {
          if (res.data.status == 200) {
            this.dataList = res.data.body;
          }
        })
      }
    },
    components: {
      XHeader,
      Top
    }
  }
</script>
<style lang="less">
  .receivePic .vux-header {
    background: #fff !important;
  }

  .instructionsLi {
    background-image: url('../../assets/immediately.png');
    background-size: 100% 100%;
  }

  .receive {
    width: 100%;
    background-image: url('../../assets/receiveBg.png');
    background-size: 100% 100%;
    background-position: center 0;
  }

  body {
    background: #fff;
  }

  .c6 {
    color: #666;
  }

  .c9 {
    color: #999;
  }

  .whiteColor {
    color: #fff;
  }

  .center {
    text-align: center;
  }

  .fa {
    position: absolute;
  }

  .fr {
    position: relative;
  }

  .center {
    text-align: center;
  }

  .receiveBox {
    margin-top: -40px;

    div {
      width: 130px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      /* background-image: url('../../assets/immediatelyBox.png'); */
      border-radius: 25px;
      margin: auto;
      background: linear-gradient(left, #ffd704, #8756ef);
      background: -webkit-gradient(linear, left top, right top, from(#ffd704), to(#8756ef));
    }
  }

  .receiveCont {
    padding: 23px;
    margin-top: 50px;
  }

  .receiveCont li {
    float: left;
    width: 22%;
    margin-right: 9px;
    list-style: none;
    img {
      display: inline-block;
      width: 80px;
    }
  }

  .receivePic .vux-header .vux-header-left .left-arrow:before {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    border: 1px solid #000;
    border-width: 1px 0 0 1px;
    -webkit-transform: rotate(315deg);
    transform: rotate(315deg);
    top: 8px;
    left: 7px;
  }

  .receivePic .vux-header .vux-header-title {
    line-height: 40px;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    color: #000 !important;
  }

  .instructions li {
    display: block;
    height: 60px;
    width: 80%;
    margin-bottom: 10px;
    line-height: 60px;
    margin: auto;
    margin-top: 10px;
  }

  .useBtn {
    width: 80px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border: 1px solid #4f2caa;
    border-radius: 25px;
    display: inline-block;
    color: #fff;
  }
</style>